<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>Three.js - Background CSS</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
        }

        #c {
            width: 100%;
            height: 100%;
            display: block;
        }

        #content {
            position: absolute;
            padding: 5px;
            white-space: pre-wrap;
            color: white;
        }
    </style>
</head>

<body>
    <div id="content">
        载入360全景图片, 
        WebGLCubeRenderTarget.fromEquirectangularTexture会自动生成立方体贴图

    </div>
    <canvas id="c"></canvas>


    <script type="importmap">
        {
            "imports": {
              "three": "../three.js-r151/build/three.module.js",
              "three/addons/": "../three.js-r151/examples/jsm/"
            }
          }
    </script>

    <!-- Remove this when import maps will be widely supported -->
    <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
</body>

<script type="module">
    import * as THREE from 'three';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

    function main() {
        const canvas = document.querySelector('#c');
        const renderer = new THREE.WebGLRenderer({
            canvas,
            alpha: true,
            antialias: true
        });

        const fov = 75;
        const aspect = 2;  // the canvas default
        const near = 0.1;
        const far = 5;
        const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
        camera.position.z = 2;

        const controls = new OrbitControls(camera, canvas);
        // controls.target.set(0, 0, 0);
        // controls.update();

        const scene = new THREE.Scene();

        {
            const color = 0xFFFFFF;
            const intensity = 1;
            const light = new THREE.DirectionalLight(color, intensity);
            light.position.set(-1, 2, 4);
            scene.add(light);
        }

        const boxWidth = 1;
        const boxHeight = 1;
        const boxDepth = 1;
        const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

        function makeInstance(geometry, color, x) {
            const material = new THREE.MeshPhongMaterial({ color });

            const cube = new THREE.Mesh(geometry, material);
            scene.add(cube);

            cube.position.x = x;

            return cube;
        }

        const cubes = [
            makeInstance(geometry, 0x44aa88, 0),
            makeInstance(geometry, 0x8844aa, -2),
            makeInstance(geometry, 0xaa8844, 2),
        ];

        {
            // const loader = new THREE.CubeTextureLoader();
            // const texture = loader.load([
            //     'https://threejs.org/manual/examples/resources/images/cubemaps/computer-history-museum/pos-x.jpg',
            //     'https://threejs.org/manual/examples/resources/images/cubemaps/computer-history-museum/neg-x.jpg',
            //     'https://threejs.org/manual/examples/resources/images/cubemaps/computer-history-museum/pos-y.jpg',
            //     'https://threejs.org/manual/examples/resources/images/cubemaps/computer-history-museum/neg-y.jpg',
            //     'https://threejs.org/manual/examples/resources/images/cubemaps/computer-history-museum/pos-z.jpg',
            //     'https://threejs.org/manual/examples/resources/images/cubemaps/computer-history-museum/neg-z.jpg',
            // ]);
            // scene.background = texture;

            const loader = new THREE.TextureLoader();
            const texture = loader.load(
                'https://threejs.org/manual/examples/resources/images/equirectangularmaps/tears_of_steel_bridge_2k.jpg',
                () => {
                    const rt = new THREE.WebGLCubeRenderTarget(texture.image.height);
                    rt.fromEquirectangularTexture(renderer, texture);
                    scene.background = rt.texture;
                });
        }

        function resizeRendererToDisplaySize(renderer) {
            const canvas = renderer.domElement;
            const width = canvas.clientWidth;
            const height = canvas.clientHeight;
            const needResize = canvas.width !== width || canvas.height !== height;
            if (needResize) {
                renderer.setSize(width, height, false);
            }
            return needResize;
        }

        function render(time) {
            time *= 0.001;

            if (resizeRendererToDisplaySize(renderer)) {
                const canvas = renderer.domElement;
                camera.aspect = canvas.clientWidth / canvas.clientHeight;
                camera.updateProjectionMatrix();
            }


            cubes.forEach((cube, ndx) => {
                const speed = 1 + ndx * .1;
                const rot = time * speed;
                cube.rotation.x = rot;
                cube.rotation.y = rot;
            });

            renderer.render(scene, camera);

            requestAnimationFrame(render);
        }

        requestAnimationFrame(render);
    }


    main();

</script>

</html>